<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>别踩白块</title>

    <link rel="stylesheet" href="./css/blackWhiteBlock.css">
</head>
<body>

<!-- show score for user  -->
<div id="title">
    <p class="score_title">Score</p>
    <input type="text" id="score_input" class="score_input"
           disabled="disabled" value="0">
</div>


<div class="box">
    <div class="game">
        <div class="row">
            <div class="column black"></div>
            <div class="column"></div>
            <div class="column"></div>
            <div class="column"></div>
        </div>
        <div class="row">
            <div class="column"></div>
            <div class="column black"></div>
            <div class="column"></div>
            <div class="column"></div>
        </div>
        <div class="row">
            <div class="column "></div>
            <div class="column"></div>
            <div class="column black"></div>
            <div class="column"></div>
        </div>
        <div class="row">
            <div class="column"></div>
            <div class="column"></div>
            <div class="column"></div>
            <div class="column black"></div>
        </div>
    </div>
</div>

<script>
    /* 兼容性获取 style */
    function getStyle(obj, attr) {
        if (window.getComputedStyle) {
            return window.getComputedStyle(obj, null)[attr];
        } else {
            // IE9
            return obj.currentStyle[attr];
        }
    }

    // 模仿 jQuery选择器
    function $(cssSelector) {
        var res = document.querySelectorAll(cssSelector);
        // 只有1个 / 有n个
        if (res.length == 1) {
            return res[0];
        } else {
            return res;
        }
    }

    // 封装：获取 [min, max] 之间的随机int 函数
    function getRandom(min, max) {
        // [min+0, min+(max-min+1)]
        // Math.floor(..) 保证 return int
        return Math.floor(Math.random() * (max - min + 1) + min);
    }

    /** start Game Rule */
    var speed = 1;

    var gameDom = $(".game");

    var score = 0;

    var time = null;

    var isOver = false;

    // Interval 打点器
    timer = setInterval(function () {
        var currentTop = parseInt(getStyle(gameDom, "top"));

        if (currentTop >= 0) {
            var newRow = document.createElement("div");
            newRow.className = "row";

            // 随机数
            var randomNum = getRandom(1, 4);

            // 创建 column
            for (let i = 1; i <= 4; i++) {
                var newColumn = document.createElement("div");

                // 设置 css
                newColumn.className = "column";

                // 判断本次 for, 哪一个设置为 black block
                if (randomNum == i) {
                    newColumn.classList.add("black");
                }

                // column 加入 Row
                newRow.appendChild(newColumn);

            }


            // 新行, 追加到 game 游戏区里面
            gameDom.insertBefore(newRow, gameDom.firstElementChild);

            // 当前高度
            currentTop = -100;

            // 4. 当我们 game 中的 RowNum > 5, 删除 game 最后一行 = 保证 game 只显示 4 Row
            if (gameDom.children.length > 5) {
                // Queue.remove = FIFO
                gameDom.lastElementChild.remove();
            }
        }

        // 刷新帧
        gameDom.style.top = currentTop + speed + "px";
    }, 15);


    /** 2、游戏交互 - 点击（使用【事件委托】实现）
     * 2.1 - 如果点击 Black
     *      1、Black -> White
     *      2、+ 1 分
     * 2.2 - 如果点击 White = 挂了
     * */

    //
    gameDom.onclick = function (e) {
        // 未结束
        if (!isOver) {
            // 点击event.target 的 class 含有 .black
            if (e.target.classList.contains("black")) {
                e.target.classList.remove("black")

                score++;
                $(".score_input").value = score;
            } else {
                alert("游戏结束!");

                window.clearInterval(timer);

                isOver = true;
            }
        } else {
            alert("游戏结束啦~")
        }
    }


    /** 未做功能：
     * 1、下落速度, 需要加速 !
     * 2、需要判断触底的时候, 最后一行黑块, 是否已经被点击过
     * */


</script>
</body>
</html>